<template>
	<view class="wrapper">
		<u-navbar
      title=""
      :autoBack="false"
      bgColor="#F6F6F6"
      titleStyle="font-weight: 500; color: #000000;"
      :placeholder="true"
    >
			<view slot="left" class="cancel" @click="leftClick(urlIndex)">{{
        $t("cancel")
      }}</view>
      <view slot="right" class="done" :class="{'not-done': !paramForm.groupName.replace(/\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x09|\x0A|\x0B|\x0C|\x0D|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F/g, '').replace('/ㅤ/g', ' ').trim()}" @click="onDoneHandle">{{
        $t("index.Done")
      }}</view>
    </u-navbar>
		<view class="pic-select-box" @click="handleUploadImage">
			<image :src="paramForm.avatarCompress || paramForm.avatar" alt="" v-if="paramForm.avatarCompress || paramForm.avatar" class="pic" mode="aspectFill"></image>
			<view class="iconfont icon-zhaoxiangji" v-else></view>
		</view>
		<view class="upload-text" @click="handleUploadImage">{{ $t("chat.SetNewPhoto") }}</view>
		<view class="name-input">
			<input class="group-name" v-model="paramForm.groupName" :placeholder="$t('contacts.Group-Name')" placeholder-class="placeholderStyle" maxlength="64">
		</view>
	</view>
</template>

<script>
import config from "@/config/app.config";
import store from "@/store/index";
import { updateGroupInfo } from '@/services/group'
import { updateGroupInfoStore } from "@/utils/index.js";
export default {
	data() {
		return {
			paramForm: {
        groupName: '',
        avatar: '',
        avatarCompress: '',
        groupId: ''
      },
			urlIndex: 'GroupMsgSetting',
		}
	},
	methods: {
		async onDoneHandle() {
			uni.showLoading()
			const resp = await updateGroupInfo({
				...this.paramForm,
				groupName: this.paramForm.groupName.replace(/\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x09|\x0A|\x0B|\x0C|\x0D|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F/g, '').replace('/ㅤ/g', ' ').trim()
			})
      if (resp.success) {
				await updateGroupInfoStore(this.paramForm)
				uni.hideLoading()
        this.leftClick(this.urlIndex)
      }
		},
		// 上传头像
    async handleUploadImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ["camera", "album"],
        success: async (res) => {
          console.log(res);
          if (res.tempFiles[0].size > 5 * 1024 * 1024) {
            uni.showToast({
              title: this.$t("dating.picLimit", {value: 5}),
              icon: "none",
            });
            return
          }
          uni.showLoading();
          const result = await this.uploadFilePromise(res.tempFilePaths[0]);
          uni.hideLoading();
          console.log(result);
          this.paramForm.avatar = result.url
          this.paramForm.avatarCompress = result.compressImage
        },
      });
    },
    //上传路径
    uploadFilePromise(url) {
      console.log(url);
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.server + "/app/oss/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          header: {
            Authorization: `Bearer ${store.state.token}`,
            version: config.version,
          },
          formData: {
            user: "upload",
          },
          success: (res) => {
            const resp = JSON.parse(res.data);
            setTimeout(() => {
              resolve(resp.data);
            }, 1000);
          },
        });
      });
    },
	},
	onLoad(option) {
		if (option.groupName) {
			this.paramForm.groupName = option.groupName.replace(/\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x09|\x0A|\x0B|\x0C|\x0D|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F/g, '').replace('/ㅤ/g', ' ').trim()
		}
		if (option.avatar) {
			this.paramForm.avatar = option.avatar
		}
		if (option.avatarCompress) {
			this.paramForm.avatarCompress = option.avatarCompress
		}
		if (option.groupId) {
			this.paramForm.groupId = option.groupId
		}
		this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
	},
}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10upx 30upx 30upx;
		box-sizing: border-box;
		.cancel {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #61BDB2;
		}
		.done {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #61BDB2;
		}
		.not-done {
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
			opacity: 0.3;
			pointer-events: none;
		}
		.pic-select-box {
      width: 200upx;
			height: 200upx;
			background: #E5EEED;
			border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-zhaoxiangji {
        font-size: 66upx;
        color: #61BDB2;
      }
      .pic {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
		.upload-text {
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #61BDB2;
			margin-top: 24upx;
		}
		.name-input {
			width: 100%;
			height: 112upx;
			background: #FFFFFF;
			border-radius: 20upx;
			margin-top: 70upx;
			padding: 0upx 30upx;
			box-sizing: border-box;
			.group-name {
				width: 100%;
				height: 100%;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
			}
			.placeholderStyle {
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #878787;
			}
		}
	}
</style>